<template>

    <el-container style="height: 700px; border: 1px solid #eee">
        <el-header style="font-size: 30px;background-color: rgb(238, 241, 246)">历史数据统计</el-header>
        <el-main>
            <div id="table">
                <!-- <el-select v-model="typeselect" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-input v-model="begindate" placeholder="请输入开始日期" style="width: 150px;"></el-input>
                <el-input v-model="enddate" placeholder="请输入结束日期" style="width: 150px;"></el-input>
                <el-button type="primary" @click="submitresult">查找</el-button> -->
                <!-- <el-button type="primary" @click="save">导出数据</el-button>
                <el-button type="primary" @click="read">导入数据</el-button> -->
                <el-input v-model="patientid" placeholder="请输入病人id" style="width: 150px;"></el-input>
                <el-button type="primary" @click="submitresult">查找</el-button> 
                <div class="chart-container" id="line">
                </div>
            </div>
            <el-popover placement="bottom" width="500" trigger="click">
                <div class="chart-container" id="line">
            </div>
                <!-- <el-button slot="reference"  @click="submitresult">查询图书</el-button> -->
            </el-popover>
           

        </el-main>
    </el-container>

</template>

<script>
import axios from 'axios';
import * as echarts from 'echarts';
import { setInterval } from 'core-js';
export default {
    data() {
        return {
            createTime: '',
            tableData: [],
            options: [{   //选择类型
                value: '温度',
                label: '温度传感器'
            }, {
                value: '湿度',
                label: '湿度传感器'
            }, {
                value: '光照强度',
                label: '光敏光感器'
            }
            ],
            typeselect: '',
            begindate: '',  //按起始时间查询
            enddate: '',  //按结束时间查询
            patientid:'',

        }
    },
    mounted() {  // 在页面加载完成后，初始化图表和获取数据

        this.initChart();

    },
    methods: {
        submitresult:function(){
            // 使用 setInterval 设置定时器
            this.timer = setInterval(() => {
                //   定时向数据库中获取数据
                axios.get("http://localhost:8888/patientlist/?patientid=" + this.patientid).then((result) => {
                    console.log(result.data);
                    for (let i = 0; i < 10; i++) {
                        this.options.series[0].data[i] = result.data.data[i].tw;
                        this.options.xAxis.data[i] = result.data.data[i].createTime;
                    }
                    console.log(result);
                })
                this.maychart.setOption(this.options);
                console.log('定时器触发');
            }, 1000); // 每隔 1 秒执行一次
        
        },
        handleFileSelect(event) {
            // 获取用户选择的文件列表
            const selectedFiles = event.target.files;
            console.log(selectedFiles);
            const reader = new FileReader();
            reader.onload = (e) => {
                // 获取文件内容
                const fileContent = e.target.result;
                console.log('文件内容：', fileContent);
            };

            // 遍历文件列表
            for (let i = 0; i < selectedFiles.length; i++) {
                const file = selectedFiles[i];

                // 创建 FileReader 对象
                const reader = new FileReader();

                // 设置 FileReader 加载完成时的回调函数
                reader.onload = (e) => {
                    // 获取文件内容
                    const fileContent = e.target.result;
                    var option = JSON.parse(fileContent)
                    this.maychart.setOption(option);

                };

                // 读取文件内容
                reader.readAsText(file);

            }
        },
        initChart() {
            // 定义图表配置项
            this.options = {
                title: {
                    text: '历史数据分析'
                },
                //设置鼠标悬停在数据点上时显示的提示框
                tooltip: {
                    trigger: 'axis'
                },
                //设置图例，用于展示不同数据系列的标签，
                legend: {
                    data: ["病人体温"]
                },
                //设置图表的网格，包括左侧边距、右侧边距、底部边距和是否包含标签等属性
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: true,
                    data: [10],
                    inverse: true, 
                
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        name: '病毒体温',
                        type: 'line', //改变统计图类型
                        data: []
                    },

                ]
            };
            // 初始化图表实例
            this.maychart = echarts.init(document.getElementById('line'));
            // 使用配置项初始化图表
            this.maychart.setOption(this.options);
        },
        read(){
            axios.get("http://localhost:8888/input")
        },
        save(){
            var  option = this.maychart.getOption()
            var json = JSON.stringify(option)
            console.log(json);
            axios({
                    url:"http://localhost:8888/saveOption",
                    method:'post',
                    data:option
                })
            alert("导出成功！")
        }
    },
    created() {   //是否已进入页面就开始获取数据
        // if (i == 1) {
        //     // 使用 setInterval 设置定时器
        //     this.timer = setInterval(() => {
        //         //   定时向数据库中获取数据
        //         axios.get("http://localhost:8888/viruslist").then((result) => {
        //             console.log(result.data);
        //             for (let i = 0; i < 10; i++) {
        //                 this.options.series[0].data[i] = result.data.data[i].virusvolum;
        //                 this.options.xAxis.data[i] = result.data.data[i].createTime;
        //             }
        //             console.log(result);
        //         })
        //         this.maychart.setOption(this.options);
        //         console.log('定时器触发');
        //     }, 1000); // 每隔 1 秒执行一次
        // }
    }
};
var i = 1;
</script>
<style>
.chart-container {
    width: 100%;
    height: 400px;
}
</style>



<!-- <template>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 30px;background-color: rgb(238, 241, 246)">历史记录</el-header>
      <el-main>
        <div id="table">
          <el-select v-model="typeselect" placeholder="请选择你想要查询的历史数据">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select> 
          <el-input v-model="begindate" placeholder="请输入开始日期"  style="width: 150px;"></el-input>
          <el-input v-model="enddate" placeholder="请输入结束日期"  style="width: 150px;"></el-input>
          <el-button type="primary" @click="submitresult">查找</el-button>
          <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column prop="warn" label="故障代码" width="180">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
            </el-table-column>
          </el-table>
          <el-pagination background layout="prev, pager, next" :page-size="5" :total="total" :current-page="page"
          @size-change="HandleSizeChange" @current-change="HandleCurentChange">
        </el-pagination>
        </div>
      </el-main>
    </el-container>
  
  </template>
  
  <style>
  .el-table .warning-row {
    background: oldlace;
  }
  
  .el-table .success-row {
    background: #f0f9eb;
  }
  </style>
  
  <script>
  import axios from 'axios'
  import { setInterval } from 'core-js';
  export default {
    mounted() {
    console.log("发请求");
      axios.get('http://localhost:8888/ysjwarnlist/' + this.page)
      .then(response => {
        // 处理请求成功的数据
        console.log(response.data);
        this.tableData = response.data.data.rows;
        this.total = response.data.data.total
      })
      .catch(error => {
        // 处理请求错误
        console.error(error);
      });
  },
    methods: {
      //分页
      HandleCurentChange(newPage) {
        this.page = newPage
        axios.get('http://localhost:8888/ysjwarnlist/' + this.page)
          .then(response => {
            // 处理请求成功的数据
            console.log(response.data);
            this.total = response.data.data.total
            this.tableData = response.data.data.rows;
          })
          .catch(error => {
            // 处理请求错误
            console.error(error);
          });
      },
      submitresult: function(){
        console.log(this.typeselect)
        console.log(this.begindate)
        console.log(this.enddate)
        if(this.typeselect == "饮水量"){
            this.label1 = "温度"
            axios.get("http://localhost:8888/listbytstate?begin=" + this.begindate + "&end=" + this.enddate)
          .then(response => {
            // 处理请求成功的数据
            console.log(response.data);
            this.tableData = response.data.data;
          })
          .catch(error => {
            // 处理请求错误
            console.error(error);
          });
        }
        else if(this.typeselect == "故障代码"){
          this.label1 = "湿度"
            axios.get("http://localhost:8888/listbyhstate?begin=" + this.begindate + "&end=" + this.enddate)
          .then(response => {
            // 处理请求成功的数据
            console.log(response.data);
            this.tableData = response.data.data;
          })
          .catch(error => {
            // 处理请求错误
            console.error(error);
          });
        }
      
      },
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    },
    data() {
      return {
        tableData: [],
        options: [{
          value: '饮水量',
          label: '饮水量历史数据'
        }, {
          value: '故障代码',
          label: '故障代码'
        }
        ],
        page: 1,
        typeselect: '',
        begindate: '',
        enddate: '',
        total: 0,
      }
    }
  }
  </script> -->